<template>
<!--  background-color: rgb(238, 241, 246);-->
  <div style=" height: 60px; line-height: 60px; background-color: royalblue">
    <el-dialog title="修改密码" :visible.sync="formVisible" :append-to-body="true" width="25%">
      <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
        <el-form-item label="旧密码" prop="oldpassword" >
          <el-input v-model="form.oldpassword" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="form.newpassword" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmpassword">
          <el-input v-model="form.confirmpassword" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
        <el-form-item style="">
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
<!--    background-color="rgb(238, 241, 246)"-->
    <div style="float: left; width: 244px; height: 100%; background-color: royalblue; color: white;font-size: 18px; padding-left: 40px">
      文卫通用远程控制平台
    </div>

    <el-menu
        style="display: inline-block; width: 60%; height: 100%; "
        :unique-opened="true"
        :default-active="activeMenu"
        router
        background-color="royalblue"
        text-color="#fff"
        active-text-color="aqua"
        mode="horizontal"
    >
      <el-menu-item v-for = "item in routesGroup" :index="item.routepath" :key="item.path">{{ item.name }}</el-menu-item>
    </el-menu>

<!--    <el-breadcrumb separator="/" style="line-height: 60px; float: left">-->
<!--      <el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>-->
<!--      &lt;!&ndash;      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>&ndash;&gt;-->
<!--      &lt;!&ndash;      <el-breadcrumb-item>活动列表</el-breadcrumb-item>&ndash;&gt;-->
<!--      &lt;!&ndash;      <el-breadcrumb-item>活动详情</el-breadcrumb-item>&ndash;&gt;-->
<!--    </el-breadcrumb>-->


    <div style="float: right; height: 60px; background-color: royalblue; overflow: hidden;">
      <el-dropdown @command="handleCommand">
        <el-avatar style="margin-top: 10px; margin-right: 60px" shape="square" size="large"
                   :src="require('@/assets/avatar1.jpg')"></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="changepassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="quit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div style="float: right; height: 60px; line-height: 60px;background-color: royalblue; overflow: hidden">
      <span style="font-size: 12px;margin-right: 30px; color: white">欢迎你：{{ user.xm }}</span>
    </div>
    <div>

    </div>
  </div>

</template>

<script>
import service from '@/utils/request'
import {resetRoutes} from "@/router";
import {dyroutesGroup} from "@/router";

export default {
  data() {
    return {
      routesGroup:dyroutesGroup,
      formVisible: false,
      formLabelWidth: '120px',
      form: {
        userId: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')).id : '',
        oldpassword: '',
        newpassword: '',
        confirmpassword: ''
      },

      rules: {
        oldpassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        newpassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        confirmpassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
      },
      user: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {},
      currentPathName: 'aaaaaaa'
    }
  },
  computed: {
    activeMenu() {
      for(let item in this.routesGroup){
        // console.log('dfdfd')
        // console.log(this.routesGroup[item].menuTreeList)
        if(this.findPath(this.$route.path, this.routesGroup[item].menuTreeList)){
          return this.routesGroup[item].routepath
        }
      }
    },
  },
  // watch: {
  //   '$route': function (newval, oldval) {
  //     this.currentPathName = newval.name
  //     console.log(newval)
  //   }
  // },
  methods: {
    click() {
      // console.log(this.routes)

    },
    findPath(path, routes) {
      let pathArr = path.split('/')
      // console.log(pathArr)
      if (pathArr[0] == '')
        pathArr.shift()
      let routesTmp = routes
      for (let j = 0; j < pathArr.length; j++) {
        let find = false
        if (routesTmp == null)
          return false
        for (let i = 0; i < routesTmp.length; i++) {
          let pathTmp = routesTmp[i].path
          if (pathTmp[0] == '/')
            pathTmp = pathTmp.substring(1)
          if (pathArr[j] == pathTmp) {
            find = true
            routesTmp = routesTmp[i].children
            break
          }
        }
        if (!find)
          return false
      }

      return true;
    },

    handleCommand(command) {
      if (command === 'quit') {
        sessionStorage.removeItem('user')
        this.$store.dispatch('clearWebSocket')
        // sessionStorage.removeItem('menurights')
        this.$router.push('/login')

      } else if (command === 'changepassword') {
        this.formVisible = true
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.newpassword !== this.form.confirmpassword) {
            this.$message.error('两次密码输入不一致')
            return
          }
          service.get('/user/changePassword', {params: this.form}).then(res => {
            if (res.data.code == 20000) {
              this.$message.success("修改成功")
              this.formVisible = false
              let user = {}
              user.username = JSON.parse(sessionStorage.getItem('user')).username
              user.password = this.form.newpassword
              sessionStorage.removeItem('user')
              service.post('/user/login', user).then(res => {
                    if (res.data.code == 20000) {
                      sessionStorage.setItem('user', JSON.stringify(res.data.data))
                      resetRoutes()
                    } else {
                      this.$message.error(res.data.message)
                    }
                  }
              )
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
}

</script>

<style scoped>

</style>
